<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="日期" prop="complaintDate">
        <el-input
          v-model="queryParams.complaintDate"
          placeholder="请输入日期"
          clearable
          style="width: 150px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="受理号码" prop="acceptanceNumber">
        <el-input
          v-model="queryParams.acceptanceNumber"
          placeholder="请输入受理号码"
          clearable
          style="width: 150px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="投诉区县" prop="complaintDistrict">
        <el-input
          v-model="queryParams.complaintDistrict"
          placeholder="请输入投诉区县"
          clearable
          style="width: 150px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否超时" prop="isOverTime">
        <el-select
          v-model="queryParams.isOverTime"
          placeholder="请选择是否超时"
          clearable
          style="width: 150px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.is_over_time"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目状态" prop="workOrderStatus">
        <el-select
          v-model="queryParams.workOrderStatus"
          placeholder="请选择项目状态"
          clearable
          style="width: 150px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.work_order_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="queryParams.workOrderStatus != 1">
        <!-- <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:complaint:add']"
        >新增
        </el-button> -->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:complaint:edit']"
          >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:complaint:remove']"
          >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-upload
          class="upload-demo"
          :headers="headers"
          :action="uploadUrl"
          :on-success="handleSuccess"
          :show-file-list="false"
          name="file"
          ref="upload"
          multiple
        >
          <el-button
            type="success"
            plain
            icon="el-icon-upload2"
            size="mini"
            v-hasPermi="['system:complaint:import']"
            >导入
          </el-button>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-upload
          class="upload-demo"
          :headers="headers"
          :action="uploadHistoryUrl"
          :on-success="handleHistorySuccess"
          :show-file-list="false"
          name="file"
          ref="upload"
          multiple
        >
          <el-button
            type="success"
            plain
            icon="el-icon-upload2"
            size="mini"
            v-hasPermi="['system:complaint:import']"
            >导入历史数据
          </el-button>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:complaint:export']"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      stripe
      v-loading="loading"
      :data="complaintList"
      :expand-row-keys="expands"
      height="650"
      :row-key="gerRowKeys"
      @expand-change="handleExpandChange"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row style="width: calc(100vw - 370px); padding: 0 20px">
            <el-form :model="props.row">
              <el-col :span="6">
                <el-form-item label="工单状态1">
                  <dict-tag
                    :options="dict.type.work_order_status"
                    :value="props.row.workOrderStatus"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="回访人员">
                  <span>{{ props.row.returningVisitor }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="日期">
                  <span>{{ props.row.complaintDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="导入时间">
                  <span>{{ props.row.recordDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="受理号码">
                  <span>{{ props.row.acceptanceNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉唯一标识">
                  <span>{{ props.row.complaintUniqueIdentifier }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="重复投诉次数">
                  <span>{{ props.row.numberOfRepeatedComplaints }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工单流水号">
                  <span>{{ props.row.workOrderSerialNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉类型">
                  <dict-tag
                    :options="dict.type.type_of_complaint"
                    :value="props.row.returningVisitor"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归一化地址">
                  <span>{{ props.row.normalizedAddress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归一化地址(TOP统计)">
                  <span>{{ props.row.normalizedAddressStatistics }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="优先级">
                  <span>{{ props.row.priority }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投诉区县">
                  <span>{{ props.row.complaintDistrict }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投诉详细地址">
                  <span>{{ props.row.complaintAddress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="问题定界">
                  <dict-tag
                    :options="dict.type.problem_delimiting"
                    :value="props.row.problemDelimiting"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="现场图片">
                  <el-image
                    v-if="props.row.fieldFileList.length > 0"
                    style="width: 100px; height: 100px"
                    :src="props.row.fieldFileList[0]"
                    :preview-src-list="props.row.fieldFileList"
                  >
                  </el-image>
                  <div v-else>暂无图片</div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="问题描述" label-width="120">
                  <div>{{ props.row.problemDescription }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="问题分类">
                  <dict-tag
                    :options="dict.type.problem_classification"
                    :value="props.row.problemClassification"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预约状态">
                  <span>{{
                    props.row.appointmentStatus == "0" ? "否" : "是"
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预约客户时间">
                  <span>{{ props.row.reserveCustomerTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="当前进展">
                  <span style="white-space: pre-wrap">{{
                    props.row.currentProgress
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="业务分类">
                  <dict-tag
                    :options="dict.type.service_classification"
                    :value="props.row.serviceClassification"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉网络制式">
                  <dict-tag
                    :options="dict.type.complaint_network_system"
                    :value="props.row.complaintNetworkSystem"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="覆盖场景">
                  <dict-tag
                    :options="dict.type.overlay_scene"
                    :value="props.row.overlayScene"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="当前环节">
                  <dict-tag
                    :options="dict.type.work_order_link"
                    :value="props.row.currentLink"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="解决方案大类">
                  <dict-tag
                    :options="dict.type.solution_category"
                    :value="props.row.solutionCategory"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="解决方案小类">
                  <dict-tag
                    :options="dict.type.solution_subclass"
                    :value="props.row.solutionSubclass"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否存在工期">
                  <dict-tag
                    :options="dict.type.overtime_work_order_flag"
                    :value="props.row.existenceDuration"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="存在工期名称">
                  <dict-tag
                    :options="dict.type.duration_name"
                    :value="props.row.existenceDurationName"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="经度">
                  <span>{{ props.row.longitudeNew }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="纬度">
                  <span>{{ props.row.latitudeNew }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方案处理进展">
                  <span>{{ props.row.projectProcessingProgress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方案是否落地">
                  <span>{{ props.row.planImplementation }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="用户10分评价意愿">
                  <dict-tag
                    :options="dict.type.user_rating"
                    :value="props.row.userEvaluationIntention"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否上传闭环录音">
                  <span>{{ props.row.uploadClosedLoopRecording }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉安抚责任人">
                  <span>{{ props.row.complaintsAppeaseThoseResponsible }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉处理组">
                  <dict-tag
                    :options="dict.type.complaints_handling_unit"
                    :value="props.row.complaintsHandlingUnit"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="处理责任人更新反馈时间">
                  <span>{{ props.row.updateFeedbackTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="用户闭环时间">
                  <span>{{ props.row.closedLoopTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉是否反馈更新">
                  <span>{{ props.row.complaintFeedbackUpdate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="自投诉起时长">
                  <span>{{ props.row.timeSinceTheComplaint }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否超时工单标记">
                  <dict-tag
                    :options="dict.type.overtime_work_order_flag"
                    :value="props.row.overtimeWorkOrderFlag"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="处理时间"
                  ><!-- 这里的数据没有修改 -->
                  <span>{{ props.row.processingTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="具体方案"
                  ><!-- 这里的数据没有修改 -->
                  <span>{{ props.row.processingTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉工单预约日期"
                  ><!-- 这里的数据没有修改 -->
                  <span>{{ props.row.processingTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="投诉处理备注"
                  ><!-- 这里的数据没有修改 -->
                  <span>{{ props.row.processingTime }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column type="index" width="55" align="center" />
      <el-table-column
        min-width="100px"
        label="工单状态"
        align="center"
        prop="workOrderStatus"
        sortable="workOrderStatus"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.work_order_status"
            :value="scope.row.workOrderStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="回访人员"
        align="center"
        prop="returningVisitor"
        sortable="returningVisitor"
      />
      <el-table-column
        min-width="150px"
        label="日期"
        align="center"
        prop="complaintDate"
        sortable="complaintDate"
      />
      <el-table-column
        min-width="150px"
        label="导入时间"
        align="center"
        prop="recordDate"
        sortable="recordDate"
      />
      <el-table-column
        min-width="200px"
        label="受理号码"
        align="center"
        prop="acceptanceNumber"
        sortable="acceptanceNumber"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="200px"
        label="投诉唯一标识"
        align="center"
        prop="complaintUniqueIdentifier"
        sortable="complaintUniqueIdentifier"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="200px"
        label="现场图片"
        align="center"
        prop="complaintUniqueIdentifier"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.fieldFileList.length > 0"
            style="width: 60px; height: 60px"
            :src="scope.row.fieldFileList[0]"
            :preview-src-list="scope.row.fieldFileList"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        label="重复投诉次数"
        align="center"
        prop="numberOfRepeatedComplaints"
        sortable="numberOfRepeatedComplaints"
      />
      <el-table-column
        min-width="250px"
        label="工单流水号"
        align="center"
        prop="workOrderSerialNumber"
        sortable="workOrderSerialNumber"
      />
      <el-table-column
        min-width="100px"
        label="投诉类型"
        align="center"
        prop="typeOfComplaint"
        sortable="typeOfComplaint"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.type_of_complaint"
            :value="scope.row.typeOfComplaint"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        label="归一化地址"
        align="center"
        prop="normalizedAddress"
        sortable="normalizedAddress"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="150px"
        label="归一化地址(TOP统计)"
        align="center"
        prop="normalizedAddressStatistics"
        sortable="normalizedAddressStatistics"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="100px"
        label="优先级"
        align="center"
        prop="priority"
        sortable="priority"
      />
      <el-table-column
        min-width="100px"
        label="投诉区县"
        align="center"
        prop="complaintDistrict"
        sortable="complaintDistrict"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.complaint_district"
            :value="scope.row.complaintDistrict"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="200px"
        label="投诉详细地址"
        align="center"
        prop="complaintAddress"
        sortable="complaintAddress"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="200px"
        label="问题描述"
        align="center"
        prop="problemDescription"
        sortable="problemDescription"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="100px"
        label="问题定界"
        align="center"
        prop="problemDelimiting"
        sortable="problemDelimiting"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.problem_delimiting"
            :value="scope.row.problemDelimiting"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        label="问题分类"
        align="center"
        prop="problemClassification"
        sortable="problemClassification"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.problem_classification"
            :value="scope.row.problemClassification"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="业务分类"
        align="center"
        prop="serviceClassification"
        sortable="serviceClassification"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.service_classification"
            :value="scope.row.serviceClassification"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="投诉网络制式"
        align="center"
        prop="complaintNetworkSystem"
        sortable="complaintNetworkSystem"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.complaint_network_system"
            :value="scope.row.complaintNetworkSystem"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="覆盖场景"
        align="center"
        prop="overlayScene"
        sortable="overlayScene"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.overlay_scene"
            :value="scope.row.overlayScene"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="200px"
        label="当前进展"
        align="center"
        prop="currentProgress"
        sortable="currentProgress"
        show-overflow-tooltip="show-overflow-tooltip"
      />
      <el-table-column
        min-width="200px"
        label="当前环节"
        align="center"
        prop="currentLink"
        sortable="currentLink"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.work_order_link"
            :value="scope.row.currentLink"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="解决方案大类"
        align="center"
        prop="solutionCategory"
        sortable="solutionCategory"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.solution_category"
            :value="scope.row.solutionCategory"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        label="解决方案小类"
        align="center"
        prop="solutionSubclass"
        sortable="solutionSubclass"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.solution_subclass"
            :value="scope.row.solutionSubclass"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="是否存在工期"
        align="center"
        prop="existenceDuration"
        sortable="existenceDuration"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.overtime_work_order_flag"
            :value="scope.row.existenceDuration"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="存在工期名称"
        align="center"
        prop="existenceDurationName"
        sortable="existenceDurationName"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.duration_name"
            :value="scope.row.existenceDurationName"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        label="具体方案"
        align="center"
        prop="specificScheme"
        sortable="specificScheme"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="150px"
        label="经度"
        align="center"
        prop="longitudeNew"
        sortable="longitude"
      />
      <el-table-column
        min-width="150px"
        label="纬度"
        align="center"
        prop="latitudeNew"
        sortable="latitude"
      />
      <el-table-column
        min-width="150px"
        label="方案处理进展"
        align="center"
        prop="projectProcessingProgress"
        sortable="projectProcessingProgress"
      />
      <el-table-column
        min-width="150px"
        label="方案是否落地"
        align="center"
        prop="planImplementation"
        sortable="planImplementation"
      />
      <el-table-column
        min-width="150px"
        label="用户10分评价意愿"
        align="center"
        prop="userEvaluationIntention"
        sortable="userEvaluationIntention"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.user_rating"
            :value="scope.row.userEvaluationIntention"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        label="是否上传闭环录音"
        align="center"
        prop="uploadClosedLoopRecording"
        sortable="uploadClosedLoopRecording"
      />
      <el-table-column
        min-width="150px"
        label="投诉安抚责任人"
        align="center"
        prop="complaintsAppeaseThoseResponsible"
        sortable="complaintsAppeaseThoseResponsible"
      />
      <el-table-column
        min-width="150px"
        label="投诉处理组"
        align="center"
        prop="complaintsHandlingUnit"
        sortable="complaintsHandlingUnit"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.complaints_handling_unit"
            :value="scope.row.complaintsHandlingUnit"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="170px"
        label="处理责任人更新反馈时间"
        align="center"
        prop="updateFeedbackTime"
        sortable="updateFeedbackTime"
      />
      <el-table-column
        min-width="150px"
        label="用户闭环时间"
        align="center"
        prop="closedLoopTime"
        sortable="closedLoopTime"
      />
      <el-table-column
        min-width="150px"
        label="投诉处理备注"
        align="center"
        prop="complaintHandlingRemarks"
        sortable="complaintHandlingRemarks"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="150px"
        label="投诉是否反馈更新"
        align="center"
        prop="complaintFeedbackUpdate"
        sortable="complaintFeedbackUpdate"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="150px"
        label="自投诉起时长"
        align="center"
        prop="timeSinceTheComplaint"
        sortable="timeSinceTheComplaint"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="150px"
        label="是否超时工单标记"
        align="center"
        prop="overtimeWorkOrderFlag"
        sortable="overtimeWorkOrderFlag"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.overtime_work_order_flag"
            :value="scope.row.overtimeWorkOrderFlag"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="处理时间"
        align="center"
        prop="processingTime"
        sortable="processingTime"
      />

      <el-table-column
        min-width="200px"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:complaint:edit']"
            >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="processJump(scope.row)"
            v-hasPermi="['system:complaint:edit']"
            >流程跳转
          </el-button>
          <el-button
            v-if="scope.row.workOrderStatus == 4"
            size="mini"
            type="text"
            icon="el-icon-s-flag"
            @click="handleAudit(scope.row)"
            v-hasPermi="['system:complaint:examine']"
            >审核
          </el-button>
          <el-button
            v-if="scope.row.workOrderStatus == 7"
            size="mini"
            type="text"
            icon="el-icon-s-flag"
            @click="handleQualityInspection(scope.row)"
            v-hasPermi="['system:complaint:edit']"
            >质检
          </el-button>
          <el-button
            v-if="scope.row.workOrderStatus > 2"
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="downloadImages(scope.row)"
            v-hasPermi="['system:complaint:examine']"
            >下载现场资料
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:complaint:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改投诉问题对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="导入时间" prop="recordDate">
              <el-input
                v-model="form.recordDate"
                placeholder="请输入导入时间"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间" prop="updateTime">
              <el-input
                v-model="form.updateTime"
                placeholder="请输入更新时间"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期" prop="complaintDate">
              <el-date-picker
                v-model="form.complaintDate"
                type="date"
                placeholder="选择日期时间"
                value-format="yyyy/MM/dd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="受理号码" prop="acceptanceNumber">
              <el-input
                v-model="form.acceptanceNumber"
                placeholder="请输入受理号码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉唯一标识" prop="acceptanceNumber">
              <el-input
                v-model="form.complaintUniqueIdentifier"
                placeholder="请输入投诉唯一标识"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="重复投诉次数"
              prop="numberOfRepeatedComplaints"
            >
              <el-input
                v-model="form.numberOfRepeatedComplaints"
                placeholder="请输入重复投诉次数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工单流水号" prop="workOrderSerialNumber">
              <el-input
                v-model="form.workOrderSerialNumber"
                placeholder="请输入工单流水号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="回访人员" prop="returningVisitor">
              <el-input
                v-model="form.returningVisitor"
                placeholder="请输入回访人员"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉类型" prop="typeOfComplaint">
              <el-select
                v-model="form.typeOfComplaint"
                placeholder="请选择投诉类型"
              >
                <el-option
                  v-for="dict in dict.type.type_of_complaint"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="归一化地址" prop="normalizedAddress">
              <el-input
                v-model="form.normalizedAddress"
                placeholder="请输入归一化地址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="归一化地址(TOP统计)"
              prop="normalizedAddressStatistics"
            >
              <el-input
                v-model="form.normalizedAddressStatistics"
                placeholder="请输入归一化地址(TOP统计)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优先级" prop="priority">
              <el-input v-model="form.priority" placeholder="请输入优先级" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="投诉区县" prop="complaintDistrict">
              <el-select
                v-model="form.complaintDistrict"
                placeholder="请选择投诉区县"
              >
                <el-option
                  v-for="dict in dict.type.complaint_district"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉详细地址" prop="complaintAddress">
              <el-input
                v-model="form.complaintAddress"
                placeholder="请输入投诉详细地址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题描述" prop="problemDescription">
              <el-input
                v-model="form.problemDescription"
                placeholder="请输入问题描述"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="问题定界" prop="problemDelimiting">
              <el-select
                v-model="form.problemDelimiting"
                placeholder="请选择问题定界"
              >
                <el-option
                  v-for="dict in dict.type.problem_delimiting"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题分类" prop="problemClassification">
              <el-select
                v-model="form.problemClassification"
                placeholder="请选择问题分类"
              >
                <el-option
                  v-for="dict in dict.type.problem_classification"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务分类" prop="serviceClassification">
              <el-select
                v-model="form.serviceClassification"
                placeholder="请选择业务"
              >
                <el-option
                  v-for="dict in dict.type.service_classification"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="投诉网络制式" prop="complaintNetworkSystem">
              <el-select
                v-model="form.complaintNetworkSystem"
                placeholder="请选择投诉网络制式"
              >
                <el-option
                  v-for="dict in dict.type.complaint_network_system"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="覆盖场景" prop="overlayScene">
              <el-select
                v-model="form.overlayScene"
                placeholder="请选择覆盖场景"
              >
                <el-option
                  v-for="dict in dict.type.overlay_scene"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="解决方案大类" prop="solutionCategory">
              <el-select
                v-model="form.solutionCategory"
                placeholder="请选择解决方案大类"
              >
                <!-- dict.type.solution_category -->
                <el-option
                  v-for="dict in dict.type.solution_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option> </el-select
              ><!-- 联动修改 -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="解决方案小类" prop="solutionSubclass">
              <el-select
                v-model="form.solutionSubclass"
                placeholder="请选择解决方案小类"
              >
                <el-option
                  v-for="dict1 in dict.type.solution_subclass"
                  :key="dict1.value"
                  :label="dict1.label"
                  :value="dict1.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="当前进展" prop="currentProgress">
              <el-input
                type="textarea"
                maxlength="-1"
                v-model="form.currentProgress"
                placeholder="请输入当前进展"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="当前环节" prop="currentLink">
              <el-select
                v-model="form.currentLink"
                placeholder="请选择当前环节"
              >
                <el-option
                  v-for="dict in dict.type.work_order_link"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否存在工期" prop="existenceDuration">
              <el-select
                v-model="form.existenceDuration"
                placeholder="请选择是否存在工期"
              >
                <el-option
                  v-for="dict in dict.type.overtime_work_order_flag"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="存在工期名称" prop="existenceDurationName">
              <el-select
                v-model="form.existenceDurationName"
                placeholder="请选择存在工期名称"
              >
                <el-option
                  v-for="dict in dict.type.duration_name"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="具体方案" prop="specificScheme">
              <el-input
                type="textarea"
                v-model="form.specificScheme"
                placeholder="请输入具体方案"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经度" prop="longitudeNew">
              <el-input v-model="form.longitudeNew" placeholder="请输入经度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度" prop="latitudeNew">
              <el-input v-model="form.latitudeNew" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="方案处理进展" prop="projectProcessingProgress">
              <el-input
                v-model="form.projectProcessingProgress"
                placeholder="请输入方案处理进展"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="方案是否落地" prop="planImplementation">
              <el-input
                v-model="form.planImplementation"
                placeholder="请输入方案是否落地"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="用户10分评价意愿"
              prop="userEvaluationIntention"
            >
              <el-select
                v-model="form.userEvaluationIntention"
                placeholder="请选择用户10分评价意愿"
              >
                <el-option
                  v-for="dict in dict.type.user_rating"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="是否上传闭环录音"
              prop="uploadClosedLoopRecording"
            >
              <el-input
                v-model="form.uploadClosedLoopRecording"
                placeholder="请输入是否上传闭环录音"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="投诉安抚责任人"
              prop="complaintsAppeaseThoseResponsible"
            >
              <el-input
                v-model="form.complaintsAppeaseThoseResponsible"
                placeholder="请输入投诉安抚责任人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉处理组" prop="complaintsHandlingUnit">
              <el-select
                v-model="form.complaintsHandlingUnit"
                placeholder="请选择投诉处理组"
              >
                <el-option
                  v-for="dict in dict.type.complaints_handling_unit"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="处理责任人更新反馈时间"
              prop="updateFeedbackTime"
            >
              <el-date-picker
                v-model="form.updateFeedbackTime"
                type="datetime"
                placeholder="选择处理责任人更新反馈时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户闭环时间" prop="closedLoopTime">
              <el-date-picker
                v-model="form.closedLoopTime"
                type="date"
                placeholder="选择用户闭环时间"
                value-format="yyyy/MM/dd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉处理备注" prop="complaintHandlingRemarks">
              <el-input
                v-model="form.complaintHandlingRemarks"
                placeholder="请输入投诉处理备注"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="投诉是否反馈更新"
              prop="complaintFeedbackUpdate"
            >
              <el-input
                v-model="form.complaintFeedbackUpdate"
                placeholder="请输入投诉是否反馈更新"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="自投诉起时长" prop="timeSinceTheComplaint">
              <el-input
                v-model="form.timeSinceTheComplaint"
                placeholder="请输入自投诉起时长"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否超时工单标记" prop="overtimeWorkOrderFlag">
              <el-select
                v-model="form.overtimeWorkOrderFlag"
                placeholder="请选择是否超时工单标记"
              >
                <el-option
                  v-for="dict in dict.type.overtime_work_order_flag"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="工单状态" prop="workOrderStatus">
              <el-select v-model="form.workOrderStatus" placeholder="请选择工单状态">
                <el-option v-for="dict in dict.type.work_order_status"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="预约客户时间" prop="reserveCustomerTime">
              <el-date-picker
                v-model="form.reserveCustomerTime"
                type="datetime"
                placeholder="选择预约客户时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="方案是否通过" prop="approved">
              <el-select
                v-model="form.approved"
                placeholder="请选择方案是否通过"
              >
                <el-option
                  v-for="dict in dict.type.approved"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题类型" prop="problemType">
              <el-select
                v-model="form.problemType"
                placeholder="请选择问题类型"
              >
                <el-option
                  v-for="dict in dict.type.problem_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核意见" prop="planFailedReason">
              <el-input
                type="textarea"
                maxlength="-1"
                v-model="form.planFailedReason"
                placeholder="请输入审核意见"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 质检 -->
    <el-dialog
      :title="title"
      :visible.sync="zhijianOpen"
      width="80%"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="当前环节" prop="currentLink">
              <el-select
                v-model="form.currentLink"
                placeholder="请选择当前环节"
              >
                <el-option
                  v-for="dict in dict.type.work_order_link"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题定界" prop="problemDelimiting">
              <el-select
                v-model="form.problemDelimiting"
                placeholder="请选择问题定界"
              >
                <el-option
                  v-for="dict in dict.type.problem_delimiting"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题分类" prop="problemClassification">
              <el-select
                v-model="form.problemClassification"
                placeholder="请选择问题分类"
              >
                <el-option
                  v-for="dict in dict.type.problem_classification"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="闭环时间" prop="closedLoopTime">
              <el-date-picker
                v-model="form.closedLoopTime"
                type="date"
                placeholder="选择闭环日期时间"
                value-format="yyyy/MM/dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题是否闭环" prop="closed">
              <el-radio v-model="form.closed" :label="1">是</el-radio>
              <el-radio v-model="form.closed" :label="0">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="闭环情况" prop="unclosedReason">
              <el-input
                type="textarea"
                v-model="form.unclosedReason"
                placeholder="请输入闭环情况"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col>
              <ul
                class="el-upload-list el-upload-list--picture-card"
                style="margin-left: 150px"
              >
                <li
                  class="el-upload-list__item is-success"
                  v-for="fit in form.followUpList"
                  :key="fit.id"
                >
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="imageUrl + fit.filePath"
                    @click="handlePictureCardPreview(fit)"
                  />
                </li>
              </ul>
            </el-col>
            <el-dialog :visible.sync="dialogVisibleimge" :modal="false">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-col>
          <el-col :span="24">
            <!-- <el-popover
              placement="top"
              width="200"
              v-model="visible"> -->
            <div v-for="(audio, index) in form.recordingFileList" :key="index">
              <audio :src="audio.filePath" controls></audio>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 流程跳转 -->
    <el-dialog
      :title="title"
      :visible.sync="flowOpen"
      width="80%"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工单状态" prop="workOrderStatus">
              <el-select
                v-model="form.workOrderStatus"
                placeholder="请选择工单状态"
              >
                <el-option
                  v-for="dict in dict.type.work_order_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审核 -->
    <el-dialog
      :title="title"
      :visible.sync="processFlag"
      width="85%"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="当前环节" prop="currentLink">
              <el-select
                v-model="form.currentLink"
                placeholder="请选择当前环节"
              >
                <el-option
                  v-for="dict in selectapprovedList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题分类" prop="problemClassification">
              <el-select
                v-model="form.problemClassification"
                placeholder="请选择问题分类"
              >
                <el-option
                  v-for="dict in dict.type.problem_classification"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务分类" prop="serviceClassification">
              <el-select
                v-model="form.serviceClassification"
                placeholder="请选择业务"
              >
                <el-option
                  v-for="dict in dict.type.service_classification"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉网络制式" prop="complaintNetworkSystem">
              <el-select
                v-model="form.complaintNetworkSystem"
                placeholder="请选择网络制式"
              >
                <el-option
                  v-for="dict in dict.type.complaint_network_system"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="覆盖场景" prop="overlayScene">
              <el-select
                v-model="form.overlayScene"
                placeholder="请选择覆盖场景"
              >
                <el-option
                  v-for="dict in dict.type.overlay_scene"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="解决方案大类" prop="solutionCategory">
              <el-select
                v-model="form.solutionCategory"
                placeholder="请选择解决方案大类"
              >
                <el-option
                  v-for="dict in dict.type.solution_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- </el-row>
        <el-row> -->
          <el-col :span="8">
            <el-form-item label="解决方案小类" prop="solutionSubclass">
              <el-select
                v-model="form.solutionSubclass"
                placeholder="请选择解决方案小类"
              >
                <el-option
                  v-for="dict in dict.type.solution_subclass"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="位置经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="longitude" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="位置纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="latitude" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="具体方案" prop="specificScheme">
              <el-input
                type="textarea"
                v-model="form.specificScheme"
                placeholder="请输入具体方案"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <ul
              class="el-upload-list el-upload-list--picture-card"
              style="margin-left: 150px"
            >
              <li
                class="el-upload-list__item is-success"
                v-for="fit in form.pictureFileList"
                :key="fit.id"
              >
                <el-image
                  style="width: 100%; height: 100%"
                  :src="imageUrl + fit.filePath"
                  @click="handlePictureCardPreview(fit)"
                />
              </li>
            </ul>
          </el-col>
          <el-dialog :visible.sync="dialogVisibleimge" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <!-- </el-row>
        <el-row> -->
          <el-col :span="8">
            <el-form-item label="方案是否通过" prop="approved">
              <el-radio v-model="form.approved" :label="'1'">是</el-radio>
              <el-radio v-model="form.approved" :label="'0'">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核意见" prop="planFailedReason">
              <el-input
                type="textarea"
                v-model="form.planFailedReason"
                placeholder="请输入审核不通过理由"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addComplaint,
  delComplaint,
  getComplaint,
  listComplaint,
  setProcessJump,
  updateComplaint,
  updateComplaint2,
} from "@/api/system/complaint";
import moment from "moment";
import { getToken } from "@/utils/auth";

export default {
  dicts: [
    "type_of_complaint",
    "complaint_district",
    "problem_delimiting",
    "problem_classification",
    "complaint_network_system",
    "overlay_scene",
    "work_order_link",
    "solution_category",
    "solution_subclass",
    "duration_name",
    "user_rating",
    "complaints_handling_unit",
    "overtime_work_order_flag",
    "work_order_status",
    "service_classification",
    "approved",
    "problem_type",
    "is_over_time",
  ],
  name: "Complaint",
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/system/complaint/importExcel", // 上传的图片服务器地址
      uploadHistoryUrl:
        process.env.VUE_APP_BASE_API + "/system/complaint/importExcelHistory",
      imageUrl:
        "https://192.168.2.150:52011/dev-api/system/complaintFieldFile/writeBytes?path=",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      dialogImageUrl: "",
      dialogVisibleimge: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectapprovedList: [
        {
          label: "4、方案审核",
          value: "4",
        },
      ],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 投诉问题表格数据
      complaintList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      processFlag: false,
      flowOpen: false,
      zhijianOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workOrderStatus: "", // 添加这个属性并设置默认值
        complaintDate: null,
        updateTime: null,
        acceptanceNumber: null,
        numberOfRepeatedComplaints: null,
        workOrderSerialNumber: null,
        returningVisitor: null,
        typeOfComplaint: null,
        normalizedAddress: null,
        normalizedAddressStatistics: null,
        priority: null,
        complaintDistrict: null,
        complaintAddress: null,
        problemDescription: null,
        problemDelimiting: null,
        problemClassification: null,
        serviceClassification: null,
        complaintNetworkSystem: null,
        overlayScene: null,
        currentProgress: null,
        currentLink: null,
        solutionCategory: null,
        solutionSubclass: null,
        existenceDuration: null,
        existenceDurationName: null,
        specificScheme: null,
        closed: null,
        unclosedReason: null,
        longitude: null,
        latitude: null,
        projectProcessingProgress: null,
        planImplementation: null,
        userEvaluationIntention: null,
        uploadClosedLoopRecording: null,
        complaintsAppeaseThoseResponsible: null,
        complaintsHandlingUnit: null,
        dateOfComplaint: null,
        updateFeedbackTime: null,
        closedLoopTime: null,
        complaintHandlingRemarks: null,
        complaintFeedbackUpdate: null,
        timeSinceTheComplaint: null,
        overtimeWorkOrderFlag: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      gerRowKeys(row) {
        return row.id;
      },
      expands: [],
    };
  },
  created() {
    this.queryParams.workOrderStatus = this.$route.query.workOrderStatus;
    this.getList();
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      var that = this;
      if (expandedRows.length > 0) {
        this.expands = [];
        // 如果当前展开的行数大于1，则关闭上一个展开的行
        if (row) {
          that.expands.push(row.id);
        }
      } else {
        that.expands = [];
      }
    },
    downloadImages(row) {
      this.$download.zip(
        "/system/complaintFieldFile/images?id=" + row.id,
        "image.zip"
      );
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = this.imageUrl + file.filePath;
      this.dialogVisibleimge = true;
    },
    formatDate(originalDate) {
      const date = new Date(originalDate);
      // 获取年月日时分秒
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      // 格式化日期
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 查询投诉问题列表 */
    getList() {
      let that = this;
      this.loading = true;
      listComplaint(this.queryParams).then((response) => {
        this.complaintList = response.rows;
        this.complaintList.forEach(function (item) {
          item.updateTime = that.formatDate(item.updateTime);
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.flowOpen = false;
      this.zhijianOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        complaintDate: null,
        updateTime: null,
        acceptanceNumber: null,
        numberOfRepeatedComplaints: null,
        workOrderSerialNumber: null,
        returningVisitor: null,
        typeOfComplaint: null,
        normalizedAddress: null,
        normalizedAddressStatistics: null,
        priority: null,
        complaintDistrict: null,
        complaintAddress: null,
        problemDescription: null,
        problemDelimiting: null,
        problemClassification: null,
        serviceClassification: null,
        complaintNetworkSystem: null,
        overlayScene: null,
        currentProgress: null,
        currentLink: null,
        solutionCategory: null,
        solutionSubclass: null,
        existenceDuration: null,
        existenceDurationName: null,
        specificScheme: null,
        closed: null,
        unclosedReason: null,
        longitude: null,
        latitude: null,
        projectProcessingProgress: null,
        planImplementation: null,
        userEvaluationIntention: null,
        uploadClosedLoopRecording: null,
        complaintsAppeaseThoseResponsible: null,
        complaintsHandlingUnit: null,
        dateOfComplaint: null,
        updateFeedbackTime: null,
        closedLoopTime: null,
        complaintHandlingRemarks: null,
        complaintFeedbackUpdate: null,
        timeSinceTheComplaint: null,
        overtimeWorkOrderFlag: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 排序
    handleSortChange(column) {
      this.queryParams.orderByColumn = column.prop; //查询字段是表格中字段名字
      this.queryParams.isAsc = column.order; //动态取值排序顺序
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加投诉问题";
      this.form.returningVisitor = this.$store.state.user.nickName;
      const today = new Date();
      const year = today.getFullYear();
      const month = (today.getMonth() + 1).toString();
      const day = today.getDate().toString();
      this.$set(this.form, "complaintDate", `${year}/${month}/${day}`);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getComplaint(id).then((response) => {
        this.form = response.data;
        if (this.form.approved !== undefined) {
          this.form.approved = this.form.approved.toString();
        }
        this.open = true;
        this.title = "修改投诉问题";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            let dictList = this.dict.type.work_order_link;
            let texts = "";
            // if (this.form.currentLink != null) {
            //   texts = this.getValueText(this.form.currentLink)
            // }
            // const date = new Date();
            // const year = date.getFullYear();
            // const month = (date.getMonth() + 1).toString().padStart(2, '0');
            // const day = date.getDate().toString().padStart(2, '0');
            // const yyyymmdd = year.toString() + month + day;
            // this.form.currentProgress = yyyymmdd + '+'+this.$store.state.user.nickName+'+'+texts+'：'+this.form.unclosedReason +'\n'+this.form.currentProgress
            updateComplaint(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.flowOpen = false;
              this.zhijianOpen = false;
              this.getList();
            });
          } else {
            addComplaint(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.flowOpen = false;
              this.zhijianOpen = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm2() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateComplaint2(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.flowOpen = false;
              this.zhijianOpen = false;
              this.getList();
            });
          } else {
            addComplaint(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.flowOpen = false;
              this.zhijianOpen = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm1() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            setProcessJump(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.flowOpen = false;
              this.getList();
            });
          } else {
            setProcessJump(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.flowOpen = false;
              this.getList();
            });
          }
        }
      });
    },
    getValueText(id) {
      console.log(JSON.stringify(this.dict.type.work_order_link));
      const foundItem = this.dict.type.work_order_link.find(
        (item) => item.value === id
      );
      return foundItem.label;
    },
    submitForm3() {
      if (this.form.approved == null || this.form.approved == "") {
        this.$message({
          message: "请选择方案是否通过！",
          type: "warning",
        });
        return;
      }
      if (
        this.form.approved == "0" &&
        (this.form.planFailedReason == null || this.form.planFailedReason == "")
      ) {
        this.$message({
          message: "请输入不通过理由！",
          type: "warning",
        });
        return;
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            let dictList = this.dict.type.work_order_link;
            let texts = "";
            // if (this.form.currentLink != null) {
            //   texts = this.getValueText(this.form.currentLink)
            // }
            // const date = new Date();
            // const year = date.getFullYear();
            // const month = (date.getMonth() + 1).toString().padStart(2, '0');
            // const day = date.getDate().toString().padStart(2, '0');
            // const yyyymmdd = year.toString() + month + day;

            // this.form.currentProgress = yyyymmdd + '+'+this.$store.state.user.nickName+'+'+texts+'：'+this.form.planFailedReason +'\n'+this.form.currentProgress
            updateComplaint(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.processFlag = false;
              this.getList();
            });
          } else {
            addComplaint(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.processFlag = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 质检按钮操作 */
    handleQualityInspection(row) {
      this.reset();
      const id = row.id || this.ids;
      getComplaint(id).then((response) => {
        this.form = response.data;
        this.form.approved = null;
        this.zhijianOpen = true;
        this.title = "质检审核";
      });
    },
    /** 流程跳转 */
    processJump(row) {
      this.reset();
      const id = row.id || this.ids;
      getComplaint(id).then((response) => {
        this.form = response.data;
        this.flowOpen = true;
        this.title = "流程跳转";
      });
    },
    /** 审核按钮操作 */
    handleAudit(row) {
      // this.processFlag = true
      this.reset();
      const id = row.id || this.ids;
      getComplaint(id).then((response) => {
        this.form = response.data;
        this.form.approved = null;
        this.form.currentLink = "4";
        this.processFlag = true;
        this.title = "审核现场方案";
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除投诉问题编号为"' + ids + '"的数据项？')
        .then(function () {
          return delComplaint(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handleSuccess(response, file) {
      if (response.code === 200) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: "文件：《" + file.name + "》导入成功",
          type: file.status,
        });
      }
      this.handleQuery();
    },
    handleHistorySuccess(response, file) {
      if (response.code === 200) {
        this.$alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
            response.msg +
            "</div>",
          "导入结果",
          { dangerouslyUseHTMLString: true }
        );
      }
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/complaint/export",
        {
          ...this.queryParams,
        },
        `投诉问题跟踪表-${this.formatLocalDate(new Date())}.xlsx`
      );
    },
    formatLocalDate(date) {
      return (
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1).toString().padStart(2, "0") +
        "-" +
        date.getDate().toString().padStart(2, "0")
      );
    },
  },
};
</script>
<style>
.el-table__body-wrapper::-webkit-scrollbar {
  width: 20px !important;
  height: 20px !important;
}

.dialog-footer {
  width: 100%;
}
</style>
